<template>
	<div class="app" @click="closeEmo()">
		<div class="center">
			<div class="el-breadcrumb">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>应用列表</el-breadcrumb-item>
					<el-breadcrumb-item>创建应用</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<el-row type="flex" class="app-form">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="bg-form-title">
						<span>创建应用</span>
					</div>
					<el-card class="box-card">
						<el-form :model="form" ref="form" :rules="rules" :label-position="labelPosition"
							label-width="80px">
							<el-form-item prop="icon" label="图标">
								<span @click="($event) => this.isShowEmo($event)" class="p-3">{{form.icon}}</span>
								<div v-show="showEmo">
									<Picker @select="showEmoji" :i18n="I18N" />
								</div>
								<el-row>
									<el-col :xs="24" :sm="12">
										<div class="app-note">挑选一个 emoji 作为应用的图标吧！</div>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="application_type" label="应用类型">
								<el-row>
									<el-col :xs="24" :sm="12" :md="16">
										<el-radio-group v-model="form.application_type">
											<el-radio label='1'>公开应用</el-radio>
											<el-radio label='2'>私有应用</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="title" label="应用名称">
								<el-row>
									<el-col :xs="24" :sm="12" :md="16">
										<el-input class="app-set" v-model="form.title" placeholder="智能翻译助手"></el-input>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="desc" label="应用描述">
								<el-row>
									<el-col :xs="24" :sm="12" :md="16">
										<el-input class="app-set" v-model="form.desc" type="textarea" :rows="3"
											placeholder="这款 App 可以将任意语言的内容，翻译成中文">
										</el-input>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="instruct" label="指令">
								<el-row>
									<el-col :xs="24" :sm="12" :md="16">
										<el-input class="app-set" v-model="form.instruct" type="textarea" :rows="3"
											placeholder="你是一个翻译官，无论接下来输入什么，你都要翻译成中文。内容是：">
										</el-input>
									</el-col>
									<el-col :xs="24" :sm="13" :md="17">
										<div class="app-note-zhiling">指令需清晰易懂，明确且有逻辑。让 ChatGPT 化身你的小帮手吧。</div>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="examples" label="输入示例">
								<el-row>
									<el-col :xs="24" :sm="12" :md="16">
										<el-input class="app-set app-set-bot" v-model="form.examples" type="textarea"
											placeholder="I love you three thousand times." autosize>
										</el-input>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item>
								<el-row>
									<el-col :xs="24" :sm="12" :md="16" style="float: right; text-align: center;">
										<el-button round @click="toHome">取消</el-button>
										<el-button type="warning" @click="testApp('form')" round>测试</el-button>
										<el-button type="success" @click="submitForm('form')" round>创建</el-button>
									</el-col>
								</el-row>

							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
			<el-row type="flex" class="app-form" v-if="resultCard">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="bg-form-title-result">
						<span>结果</span>
					</div>
					<el-card class="box-card" v-loading="loading">
						<div @click="copyContent">
							{{content}}
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="提示" :visible.sync="dialogVisible" :width="dialogWidth" center>
			<span>{{dialogContent}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleClose">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 登录 -->
		<Login :centerDialogVisible="loginShow" @click="clickDialog" :title="title" v-bind:isLogin.sync="isLogin">

		</Login>
	</div>
</template>
<script>
	import { Picker } from "emoji-mart-vue";
	import axios from "axios";
	import Vue from 'vue';
	import Login from "./Login.vue";
	import { baseUrl } from '../utils/global.js'
	import jsCopy from '../utils/copy.js'
	import {menuSeen} from '../utils/Tool.js'

	const I18N = {
		search: '搜索',
		notfound: 'No Emoji Found',
		categories: {
			search: '搜索结果',
			recent: '经常使用',
			smileys: '表情与情感',
			people: '人物与身体',
			nature: '动物与自然',
			foods: '食物与饮料',
			activity: '活动',
			places: '旅行与地理',
			objects: '物品',
			symbols: '符号标志',
			flags: '旗帜',
			custom: 'Custom',
		},
	}

	export default {
		name: 'CreateApplication',
		components: {
			Picker,
			Login
		},

		data() {
			return {
				resultCard: false,
				loading: true,
				dialogVisible: false,
				dialogContent: "",
				dialogWidth: "30%",
				loginShow: false,
				isShowRun: false,
				isLogin: true,
				title: "",
				radio: '1',
				labelPosition: 'top',
				I18N: I18N,
				showEmo: false,
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
				content: "", // 结果内容
				form: {
					"title": "",
					"desc": "",
					"icon": "🤖",
					"instruct": "",
					"examples": "",
					"user_id": 0,
					"application_type": '1'
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					],
					application_type: [{
						required: true,
						message: '应用类型必选',
						trigger: 'blur'
					}],
					icon: [{
						required: true,
						message: '图标不能为空',
						trigger: 'blur'
					}, ],
					desc: [{
							required: true,
							message: '请输入应用描述',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 50,
							message: '长度在 2 到 50 个字符',
							trigger: 'blur'
						}
					],
					instruct: [{
							required: true,
							message: '请输入指令',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 150,
							message: '长度在 2 到 150 个字符',
							trigger: 'blur'
						}
					],
					examples: [{
							required: true,
							message: '请输入示例',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 250,
							message: '长度在 2 到 150 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			handleClose() {
				if (Vue.$cookies.get('token') == null) {
					this.isLoginToken();
				}
				this.dialogVisible = false;
			},
			toHome() {
				this.$router.push({
					name: "Index"
				});
			},
			testApp(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						/* this.$router.push({
							path: "/RunApp", //这个path就是你在router/index.js里边配置的路径
							query: {
								title: this.form.title,
								desc: this.form.desc,
								instruct: this.form.instruct,
								examples: this.form.examples
							}
						}) */
						this.resultCard = true;
						this.loading = true;
						const config = {
							headers: {
								"Authorization": "bearer " + Vue.$cookies.get('token'),
							}
						};
						let data = {
							"instruct": this.form.instruct,
							"examples": this.form.examples
						};
						axios.post(baseUrl + "/chat_application/application/chat", data, config)
							.then((res) => {
								if (res.status == 200) {
									this.loading = false;
									this.content = res.data.message.content;
								}
							})
							.catch((res) => {
								if (res.response.status == 400) {
									this.dialogContent = "超出免费试用次数,登录可增加使用次数 是否继续?"
									if (Vue.$cookies.get('token') != null) {
										this.dialogContent = "免费试用次数已使用完";
									}
									this.dialogVisible = true;
									this.loading = false;
									this.resultCard = false;
									return
								}
								this.$message.error(res.response.data.detail);
								this.resultCard = false;
								this.loading = false;
							});
					}
				})
			},
			// 选择表情
			showEmoji(emoji) {
				this.form.icon = emoji.native;
				this.showEmo = false;
			},
			// 是否显示emo
			isShowEmo(e) {
				e.stopPropagation();
				this.showEmo = !this.showEmo;

			},
			closeEmo() {
				if (this.showEmo) {
					this.showEmo = !this.showEmo;
				}
			},
			// 提交
			submitForm(form) {
				if (Vue.$cookies.get('token') == null) {
					this.isLoginToken();
					return
				}
				this.$refs[form].validate((valid) => {
					if (valid) {
						const config = {
							headers: {
								"Authorization": "bearer " + Vue.$cookies.get('token'),
							}
						};
						axios.post(baseUrl + "/chat_application/application", this.form, config)
							.then((res) => {
								if (res.status == 200) {
									this.$message({
										message: "创建成功",
										type: "success",
										duration: 1500,
									});
									this.$router.push({
										path: "/RunApp", //这个path就是你在router/index.js里边配置的路径
										query: {
											title: this.form.title,
											desc: this.form.desc,
											instruct: this.form.instruct,
											examples: this.form.examples
										}
									})
								}
							})
							.catch((res) => {
								this.$message.error(res.response.data.detail[0].msg);
							});

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			/* 是否登录 */
			isLoginToken() {
				if (Vue.$cookies.get('token') == null) {
					this.loginShow = true;
					this.isLogin = true;
					this.title = "欢迎登录";
				}
			},
			clickDialog(data) {
				if (data.index == 0 || data.index == 1) {
					this.loginShow = false;
				}
			},
			/* 复制 */
			copyContent() {
				jsCopy.copyText(this.content);
			}
		},
		mounted() {
			this.isLoginToken();
			const screenHeight = menuSeen()
			if(screenHeight>415){
			    this.dialogWidth="30%";
			}else{
			    this.dialogWidth="90%";
			}
			
		},

	}
</script>

<style scoped>
	@import '../../static/css/CreateApplication.css'
</style>
